<template>
	<view class="container">
		<view v-if="kp" class="ji">
			还没有商品，赶紧去添加商品吧!
		</view>
		<view class="top">
			<scroll-view v-for="(item,index) in list" :key="index" class="scroll-view_H" scroll-x="true" scroll-left="0">
				<view class="cartInfo" id="demo1">
					<!-- 购物车商品信息 -->
					<view class="cartInfochild">
						<!-- 选择框 -->
						<view class="cartInfo_switch common">
							<!-- 点击当前商品 -->
							<switch type="checkbox" @click="checked(index)" :checked="item.checked" />
						</view>
						<!-- 图片 -->
						<view class="cartInfo_image common">
							<image :src="item.img" mode=""></image>
						</view>

						<!-- 信息 -->
						<view class="cartInfo_info">
							<label class="fy" for="" style="font-size: 26rpx;">{{item.goodsname}} </label>
							<label for="" style="font-size: 24rpx; color: #ccc;">规格：黑色</label>
							<label for="" style="color: red;">￥{{item.price}}</label>
						</view>
						<!-- 加减数量 -->
						<view class="cartInfo_num">
							<view class="cartInfo_num_child">
								<label v-if="item.num<=1" disabled="" for="">-</label>
								<label v-if="item.num>1" @click="reduce(index)" for="">-</label>
								<label for="">{{item.num}} </label>
								<label @click="plus(index)" for="">+</label>
							</view>
						</view>
					</view>
				</view>
				<view class="cartDel" @click="redu(item.id)" id="demo2"><label for="">删除</label></view>
			</scroll-view>
		</view>

		<!-- 底部 -->
		<view class="foot">
			<view class="footd1">
				<switch type="checkbox" :checked="isAll" @click="change" />
				<label>全选</label>
			</view>
			<view class="footd2">
				<view class="footd2sp1">
					总计：
					<label style="color: red;">{{total.result}}</label>
				</view>
				<label class="footd2sp2">不含运费，已优惠￥0.00</label>
			</view>
			<!-- 跳到提交订单，结算页面 -->
			<view class="footd3" @click="jump">
				<!-- 被选中的商品的个数 -->
				<label>去结算({{total.arr.length}})</label>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		baseUrl
	} from "../../utils/config.js"
	export default {
		data() {
			return {
				token: "",
				num: "",
				list: [],
				kp: false
			}
		},
		onLoad(e) {
			if (e.id == 1) {
				uni.showToast({
					title: "提交成功，我的/订单中查看"
				})
			}
			
			this.token = JSON.parse(uni.getStorageSync("login"))
			this.getlist()
		},
		computed: {
			total: function() {
				var obj = {
					result: 0,
					arr: [],
				}
				if (this.list != "") {
					this.list.map(item => {
						if (item.checked) {
							obj.result += item.price * item.num
							obj.arr.push(item)
						}
					})
				}

				console.log(obj.arr)
				return obj
			},
			isAll: function() {
				if (this.list.length == 0) {
					return false
				}
				var result = this.list.every(item => {
					return item.checked == true
				})
				return result
			}
		},

		onShow() {
			this.getlist()
		},
		methods: {
			async getlist() {
				let result = await this.$http("/api/cartlist", "get", {
					uid: this.token.uid
				}, this.token.token)
				// console.log(result.data.list);

				// var list=result.data.list;
				// list.forEach(item=>{
				// 	item.checked=false
				// })
				// this.list=list;

				// 先赋值再循环
				// this.list=result.data.list
				// this.list.map(item=>{
				// 	item.checked = false
				// })

				// 先循环在赋值
				if (result.data.list == null) {
					this.kp = true
					this.list = ""
				} else {
					this.kp = false
					result.data.list.map(item => {
						item.checked = false
						item.img = baseUrl + item.img
					})
					this.list = result.data.list
				}


			},
			checked(index) {
				this.list[index].checked = !this.list[index].checked
			},
			change() {
				var result = !this.isAll
				this.list.map(item => {
					item.checked = result

				})
			},
			jump() {
				if (this.list.length <= 0) {
					uni.showToast({
						title: "请先添加商品",
						icon: "none"
					})
				} else {
					if (this.total.arr.length <= 0) {
						uni.showToast({
							title: "请选择需要购买的商品",
							icon: "none"
						})
					} else {
						uni.setStorageSync("goods", this.total.arr)
						uni.navigateTo({
							url: "../confirm/confirm"
						})
					}
				}

			},
			async redu(id) {
				let result = await this.$http("/api/cartdelete", "get", {
					id
				}, this.token.token)
				this.getlist()
			},
			reduce(index) {

				var num = --this.list[index].num
				this.path(index, num)
			},
			plus(index) {
				var num = ++this.list[index].num
				this.path(index, num)
			},
			async path(index, num) {
				var id = this.list[index].id
				let result = await this.$http("/api/cartedit", "get", {
					id,
					num

				}, this.token.token)
				// this.getlist()
			}
		}

	};
</script>

<style>
	@import url('../../common/css/cart.css');

	.cartInfo_image_img {
		width: 120rpx;
		height: 120rpx;
	}

	.fy {
		width: 500rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.ji {
		color: gray;
		text-align: center;
		font-size: 30rpx;
		line-height: 500rpx;
	}
</style>
